<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script th:src="@{/layui/layui.js}" type="text/javascript"></script>
		<link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
		<style>
			.layui-form-select dl dd.layui-this {
				background-color: #1e9fff;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div>
			<form class="layui-form layui-form-pane" style="margin:10px">
				<div class="layui-form-item">
					<label class="layui-form-label">任务名称</label>
					<div class="layui-input-block">
						<input class="layui-input" name="jobName" lay-verify="required" autocomplete="off" placeholder="请输入任务名称">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">任务分组</label>
					<div class="layui-input-block">
						<input class="layui-input" name="jobGroup" lay-verify="required" autocomplete="off" placeholder="请输入任务组名称">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">任务类名</label>
					<div class="layui-input-block">
						<select class="layui-select" name="className" id="className">
							<option value="">请选择</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">表达式</label>
						<div class="layui-input-inline">
							<input class="layui-input" readonly name="corn" lay-verify="required" id="cron" autocomplete="off" placeholder="请输入表达式">
						</div>
					</div>
					<div class="layui-inline">
						<div class="layui-input-inline">
							<a class="layui-btn layui-btn-normal" id="cronCreate" data-method="cronCreate">打开cron生成器</a>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">触发器名称</label>
					<div class="layui-input-block">
						<input class="layui-input" name="triggerName" lay-verify="required" autocomplete="off" placeholder="请输入触发器名称">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">触发器组名</label>
					<div class="layui-input-block">
						<input class="layui-input" name="triggerGroup" lay-verify="required" autocomplete="off" placeholder="请输入触发器组名称">
					</div>
				</div>
				<div class="layui-form-item" style="display: none">
					<a class="layui-btn" lay-submit="" lay-filter="submitBtn" id="submitBtn">提交</a>
				</div>
			</form>
			</div>
			<script>
				var classNames = [
					{"title":"测试任务1","value":"com.mall.job.TestJob"},
					{"title":"测试任务2","value":"com.mall.job.TestJob"},
					{"title":"测试任务3","value":"com.mall.job.TestJob"},
					{"title":"测试任务4","value":"com.mall.job.TestJob"},
				]
				var $;
				layui.use(['table','form','layer','jquery'],function(){
					var table = layui.table,
					form = layui.form,
					layer = layui.layer;
					$ = layui.jquery;

					getClassName();

					form.on('submit(submitBtn)',function (data) {
						$.ajax({
							type:'post',
							url:'/system/sc/add',
							data:data.field,
							dataType:'json',
							success:function(result){
								layer.msg(result.msg);
								if(result.is){
		                            let index = parent.layer.getFrameIndex(window.name);
		                            parent.layer.close(index);//关闭父页面窗口
		                        }
							}
						})
					})
					
					 $('#cronCreate').on('click',function (obj) {
		                top.layer.open({
							title:'选择corn表达式',
		                    type:2,
		                    content:'/page/system/editCorn',
		                    area:['900px','650px'],
		                    offset:'c',
		                    id:'cronIframe',
		                    btn:['确定','取消'],
		                    btn1:function(i,o){
		                    	var value = o.find('iframe')[0].contentWindow.getValue();
		                    	$("#cron").val(value);
		                    },
		                    end:function(){
		                    	
		                    }
		                });
		
		            })
				})

				function getClassName() {
					$.ajax({
						type:'get',
						url:'/data/className.json',
						dataType: 'json',
						success:function (classNames) {
							$.each(classNames,function (i,cn) {
								var option = '<option value="'+cn.value+'">'+cn.title+'</option>';
								$('#className').append(option);
							})
							layui.form.render("select");//重新渲染
						}
					})

				}
				
				function submitBtn(){
					$('#submitBtn').click();
				}
				
			</script>
	</body>
</html>
